<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/image-maps.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:26 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=media.html>← 4.8.8 The video element</a> — <a href=index.html>Table of Contents</a> — <a href=embedded-content-other.html>4.8.15 MathML →</a></nav><ol class=toc><li><ol><li><ol><li><a href=image-maps.html#the-map-element><span class=secno>4.8.12</span> The <code>map</code> element</a><li><a href=image-maps.html#the-area-element><span class=secno>4.8.13</span> The <code>area</code> element</a><li><a href=image-maps.html#image-maps><span class=secno>4.8.14</span> Image maps</a></ol></ol></ol><h4 id=the-map-element><span class=secno>4.8.12</span> The <dfn data-dfn-type=element><code>map</code></dfn> element<a href=#the-map-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map title="The <map> HTML element is used with <area> elements to define an image map (a clickable link area).">Element/map</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-map-element:concept-element-categories>Categories</a>:<dd><a id=the-map-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-map-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-map-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-map-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-map-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-map-element:concept-element-content-model>Content model</a>:<dd><a id=the-map-element:transparent href=dom.html#transparent>Transparent</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-map-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-map-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-map-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-map-element:attr-map-name><a href=#attr-map-name>name</a></code> —  Name of <a href=#image-map id=the-map-element:image-map>image map</a> to <a href=dom.html#referenced id=the-map-element:referenced>reference</a> from the <code id=the-map-element:attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-map-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-map>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-map>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-map-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLMapElement</code>.</dl>

  <p>The <code id=the-map-element:the-map-element><a href=#the-map-element>map</a></code> element, in conjunction with an <code id=the-map-element:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element and any
  <code id=the-map-element:the-area-element><a href=#the-area-element>area</a></code> element descendants, defines an <a href=#image-map id=the-map-element:image-map-2>image map</a>. The element
  <a id=the-map-element:represents href=dom.html#represents>represents</a> its children.</p>

  <p>The <dfn data-dfn-for=map id=attr-map-name data-dfn-type=element-attr><code>name</code></dfn> attribute gives
  the map a name so that it can be <a id=the-map-element:referenced-2 href=dom.html#referenced>referenced</a>. The attribute must be present and must
  have a non-empty value with no <a id=the-map-element:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>. The value of the <code id=the-map-element:attr-map-name-2><a href=#attr-map-name>name</a></code> attribute must not be equal to the value of the <code id=the-map-element:attr-map-name-3><a href=#attr-map-name>name</a></code> attribute of another <code id=the-map-element:the-map-element-2><a href=#the-map-element>map</a></code> element in the same
  <a id=the-map-element:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a>. If the <code id=the-map-element:the-id-attribute><a href=dom.html#the-id-attribute>id</a></code> attribute is also specified, both
  attributes must have the same value.</p>

  <dl class=domintro><dt><code><var>map</var>.<span id=dom-map-areas>areas</span></code><dd>
    <p>Returns an <code id=the-map-element:htmlcollection><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=the-map-element:the-area-element-2><a href=#the-area-element>area</a></code> elements in the
    <code id=the-map-element:the-map-element-3><a href=#the-map-element>map</a></code>.</p>
   </dl>

  

  <div class=example>

   <p>Image maps can be defined in conjunction with other content on the page, to ease maintenance.
   This example is of a page with an image map at the top of the page and a corresponding set of
   text links at the bottom.</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>HTML</c-> <c- e>LANG</c-><c- o>=</c-><c- s>&quot;EN&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>TITLE</c-><c- p>&gt;</c->Babies™: Toys<c- p>&lt;/</c-><c- f>TITLE</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>HEADER</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>H1</c-><c- p>&gt;</c->Toys<c- p>&lt;/</c-><c- f>H1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>IMG</c-> <c- e>SRC</c-><c- o>=</c-><c- s>&quot;/images/menu.gif&quot;</c->
      <c- e>ALT</c-><c- o>=</c-><c- s>&quot;Babies™ navigation menu. Select a department to go to its page.&quot;</c->
      <c- e>USEMAP</c-><c- o>=</c-><c- s>&quot;#NAV&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>HEADER</c-><c- p>&gt;</c->
 ...
<c- p>&lt;</c-><c- f>FOOTER</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>MAP</c-> <c- e>NAME</c-><c- o>=</c-><c- s>&quot;NAV&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>P</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>A</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;/clothes/&quot;</c-><c- p>&gt;</c->Clothes<c- p>&lt;/</c-><c- f>A</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>AREA</c-> <c- e>ALT</c-><c- o>=</c-><c- s>&quot;Clothes&quot;</c-> <c- e>COORDS</c-><c- o>=</c-><c- s>&quot;0,0,100,50&quot;</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;/clothes/&quot;</c-><c- p>&gt;</c-> |
   <c- p>&lt;</c-><c- f>A</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;/toys/&quot;</c-><c- p>&gt;</c->Toys<c- p>&lt;/</c-><c- f>A</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>AREA</c-> <c- e>ALT</c-><c- o>=</c-><c- s>&quot;Toys&quot;</c-> <c- e>COORDS</c-><c- o>=</c-><c- s>&quot;100,0,200,50&quot;</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;/toys/&quot;</c-><c- p>&gt;</c-> |
   <c- p>&lt;</c-><c- f>A</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;/food/&quot;</c-><c- p>&gt;</c->Food<c- p>&lt;/</c-><c- f>A</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>AREA</c-> <c- e>ALT</c-><c- o>=</c-><c- s>&quot;Food&quot;</c-> <c- e>COORDS</c-><c- o>=</c-><c- s>&quot;200,0,300,50&quot;</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;/food/&quot;</c-><c- p>&gt;</c-> |
   <c- p>&lt;</c-><c- f>A</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;/books/&quot;</c-><c- p>&gt;</c->Books<c- p>&lt;/</c-><c- f>A</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>AREA</c-> <c- e>ALT</c-><c- o>=</c-><c- s>&quot;Books&quot;</c-> <c- e>COORDS</c-><c- o>=</c-><c- s>&quot;300,0,400,50&quot;</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;/books/&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>P</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>MAP</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>FOOTER</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h4 id=the-area-element><span class=secno>4.8.13</span> The <dfn data-dfn-type=element><code>area</code></dfn> element<a href=#the-area-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area title="The <area> HTML element defines an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with hypertext links.">Element/area</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-area-element:concept-element-categories>Categories</a>:<dd><a id=the-area-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-area-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-contexts id=the-area-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-area-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected, but only if there is a <code id=the-area-element:the-map-element><a href=#the-map-element>map</a></code> element ancestor.<dt><a href=dom.html#concept-element-content-model id=the-area-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-area-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-area-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-area-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-area-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-area-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-area-element:attr-area-alt><a href=#attr-area-alt>alt</a></code> —  Replacement text for use when images are not available
     <dd><code id=the-area-element:attr-area-coords><a href=#attr-area-coords>coords</a></code> —  Coordinates for the shape to be created in an <a href=#image-map id=the-area-element:image-map>image map</a>
     <dd><code id=the-area-element:attr-area-shape><a href=#attr-area-shape>shape</a></code> —  The kind of shape to be created in an <a href=#image-map id=the-area-element:image-map-2>image map</a>
     <dd><code id=the-area-element:attr-hyperlink-href><a href=links.html#attr-hyperlink-href>href</a></code> —  Address of the <a id=the-area-element:hyperlink href=links.html#hyperlink>hyperlink</a>
     <dd><code id=the-area-element:attr-hyperlink-target><a href=links.html#attr-hyperlink-target>target</a></code> —  <a id=the-area-element:navigable href=document-sequences.html#navigable>Navigable</a> for <a id=the-area-element:hyperlink-2 href=links.html#hyperlink>hyperlink</a> <a href=browsing-the-web.html#navigate id=the-area-element:navigate>navigation</a>
     <dd><code id=the-area-element:attr-hyperlink-download><a href=links.html#attr-hyperlink-download>download</a></code> —  Whether to download the resource instead of navigating to it, and its filename if so
     <dd><code id=the-area-element:ping><a href=links.html#ping>ping</a></code> —  <a href=https://url.spec.whatwg.org/#concept-url id=the-area-element:url data-x-internal=url>URLs</a> to ping
     <dd><code id=the-area-element:attr-hyperlink-rel><a href=links.html#attr-hyperlink-rel>rel</a></code> —  Relationship between the location in the document containing the <a id=the-area-element:hyperlink-3 href=links.html#hyperlink>hyperlink</a> and the destination resource
     <dd><code id=the-area-element:attr-hyperlink-referrerpolicy><a href=links.html#attr-hyperlink-referrerpolicy>referrerpolicy</a></code> —  <a id=the-area-element:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>Referrer policy</a> for <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-area-element:concept-fetch data-x-internal=concept-fetch>fetches</a> initiated by the element
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-area-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd>If the element has an <code id=the-area-element:attr-hyperlink-href-2><a href=links.html#attr-hyperlink-href>href</a></code> attribute: <a href=https://w3c.github.io/html-aria/#el-area>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-area>for implementers</a>.<dd>Otherwise: <a href=https://w3c.github.io/html-aria/#el-area-no-href>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-area-no-href>for implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-area-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLAreaElement</code>.</dl>

  <p>The <code id=the-area-element:the-area-element><a href=#the-area-element>area</a></code> element <a id=the-area-element:represents href=dom.html#represents>represents</a> either a hyperlink with some text and a
  corresponding area on an <a href=#image-map id=the-area-element:image-map-3>image map</a>, or a dead area on an image map.</p>

  <p>An <code id=the-area-element:the-area-element-2><a href=#the-area-element>area</a></code> element with a parent node must have a <code id=the-area-element:the-map-element-2><a href=#the-map-element>map</a></code> element
  ancestor.</p>

  <p>If the <code id=the-area-element:the-area-element-3><a href=#the-area-element>area</a></code> element has an <code id=the-area-element:attr-hyperlink-href-3><a href=links.html#attr-hyperlink-href>href</a></code>
  attribute, then the <code id=the-area-element:the-area-element-4><a href=#the-area-element>area</a></code> element represents a <a id=the-area-element:hyperlink-4 href=links.html#hyperlink>hyperlink</a>. In this case,
  the <dfn data-dfn-for=area id=attr-area-alt data-dfn-type=element-attr><code>alt</code></dfn> attribute must be
  present. It specifies the text of the hyperlink. Its value must be text that, when presented with
  the texts specified for the other hyperlinks of the <a href=#image-map id=the-area-element:image-map-4>image map</a>, and with the
  alternative text of the image, but without the image itself, provides the user with the same kind
  of choice as the hyperlink would when used without its text but with its shape applied to the
  image. The <code id=the-area-element:attr-area-alt-2><a href=#attr-area-alt>alt</a></code> attribute may be left blank if there is another
  <code id=the-area-element:the-area-element-5><a href=#the-area-element>area</a></code> element in the same <a href=#image-map id=the-area-element:image-map-5>image map</a> that points to the same resource and
  has a non-blank <code id=the-area-element:attr-area-alt-3><a href=#attr-area-alt>alt</a></code> attribute.</p>

  <p>If the <code id=the-area-element:the-area-element-6><a href=#the-area-element>area</a></code> element has no <code id=the-area-element:attr-hyperlink-href-4><a href=links.html#attr-hyperlink-href>href</a></code>
  attribute, then the area represented by the element cannot be selected, and the <code id=the-area-element:attr-area-alt-4><a href=#attr-area-alt>alt</a></code> attribute must be omitted.</p>

  <p>In both cases, the <code id=the-area-element:attr-area-shape-2><a href=#attr-area-shape>shape</a></code> and <code id=the-area-element:attr-area-coords-2><a href=#attr-area-coords>coords</a></code> attributes specify the area.</p>

  <p>The <dfn data-dfn-for=area id=attr-area-shape data-dfn-type=element-attr><code>shape</code></dfn> attribute is
  an <a id=the-area-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and states:</p>

  <table class=yesno><thead><tr><th>Keyword
     <th>State
     <tbody><tr><td><dfn id=attr-area-shape-keyword-circle><code>circle</code></dfn>
     <td><a href=#attr-area-shape-circle id=the-area-element:attr-area-shape-circle>Circle state</a>
     <tr><td><dfn id=attr-area-shape-keyword-default><code>default</code></dfn>
     <td><a href=#attr-area-shape-default id=the-area-element:attr-area-shape-default>Default state</a>
     <tr><td><dfn id=attr-area-shape-keyword-poly><code>poly</code></dfn>
     <td><a href=#attr-area-shape-poly id=the-area-element:attr-area-shape-poly>Polygon state</a>
     <tr><td><dfn id=attr-area-shape-keyword-rect><code>rect</code></dfn>
     <td><a href=#attr-area-shape-rect id=the-area-element:attr-area-shape-rect>Rectangle state</a>
     </table>

  <p>The attribute's <i id=the-area-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-area-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <a href=#attr-area-shape-rect id=the-area-element:attr-area-shape-rect-2>rectangle</a> state.</p>

  <p>The <dfn data-dfn-for=area id=attr-area-coords data-dfn-type=element-attr><code>coords</code></dfn> attribute
  must, if specified, contain a <a id=the-area-element:valid-list-of-floating-point-numbers href=common-microsyntaxes.html#valid-list-of-floating-point-numbers>valid list of floating-point numbers</a>. This attribute
  gives the coordinates for the shape described by the <code id=the-area-element:attr-area-shape-3><a href=#attr-area-shape>shape</a></code>
  attribute. </p>

  

  <p>In the <dfn data-dfn-for=area/shape id=attr-area-shape-circle data-dfn-type=attr-value>circle state</dfn>,
  <code id=the-area-element:the-area-element-7><a href=#the-area-element>area</a></code> elements must have a <code id=the-area-element:attr-area-coords-3><a href=#attr-area-coords>coords</a></code> attribute
  present, with three integers, the last of which must be non-negative. The first integer must be
  the distance in <a href=https://drafts.csswg.org/css-values/#px id="the-area-element:'px'" data-x-internal="'px'">CSS pixels</a> from the left edge of the image to the
  center of the circle, the second integer must be the distance in <a href=https://drafts.csswg.org/css-values/#px id="the-area-element:'px'-2" data-x-internal="'px'">CSS
  pixels</a> from the top edge of the image to the center of the circle, and the third integer
  must be the radius of the circle, again in <a href=https://drafts.csswg.org/css-values/#px id="the-area-element:'px'-3" data-x-internal="'px'">CSS pixels</a>.</p>

  <p>In the <dfn data-dfn-for=area/shape id=attr-area-shape-default data-dfn-type=attr-value>default state</dfn>,
  <code id=the-area-element:the-area-element-8><a href=#the-area-element>area</a></code> elements must not have a <code id=the-area-element:attr-area-coords-4><a href=#attr-area-coords>coords</a></code>
  attribute. (The area is the whole image.)</p>

  <p>In the <dfn data-dfn-for=area/shape id=attr-area-shape-poly data-dfn-type=attr-value>polygon state</dfn>,
  <code id=the-area-element:the-area-element-9><a href=#the-area-element>area</a></code> elements must have a <code id=the-area-element:attr-area-coords-5><a href=#attr-area-coords>coords</a></code> attribute
  with at least six integers, and the number of integers must be even. Each pair of integers must
  represent a coordinate given as the distances from the left and the top of the image in <a href=https://drafts.csswg.org/css-values/#px id="the-area-element:'px'-4" data-x-internal="'px'">CSS pixels</a> respectively, and all the coordinates together must represent the
  points of the polygon, in order.</p>

  <p>In the <dfn data-dfn-for=area/shape id=attr-area-shape-rect data-dfn-type=attr-value>rectangle state</dfn>,
  <code id=the-area-element:the-area-element-10><a href=#the-area-element>area</a></code> elements must have a <code id=the-area-element:attr-area-coords-6><a href=#attr-area-coords>coords</a></code> attribute
  with exactly four integers, the first of which must be less than the third, and the second of
  which must be less than the fourth. The four points must represent, respectively, the distance
  from the left edge of the image to the left side of the rectangle, the distance from the top edge
  to the top side, the distance from the left edge to the right side, and the distance from the top
  edge to the bottom side, all in <a href=https://drafts.csswg.org/css-values/#px id="the-area-element:'px'-5" data-x-internal="'px'">CSS pixels</a>.</p>

  

  <p>The <code id=the-area-element:attr-hyperlink-target-2><a href=links.html#attr-hyperlink-target>target</a></code>, <code id=the-area-element:attr-hyperlink-download-2><a href=links.html#attr-hyperlink-download>download</a></code>, <code id=the-area-element:ping-2><a href=links.html#ping>ping</a></code>,
  <code id=the-area-element:attr-hyperlink-rel-2><a href=links.html#attr-hyperlink-rel>rel</a></code>, and <code id=the-area-element:attr-hyperlink-referrerpolicy-2><a href=links.html#attr-hyperlink-referrerpolicy>referrerpolicy</a></code> attributes must be omitted if the
  <code id=the-area-element:attr-hyperlink-href-5><a href=links.html#attr-hyperlink-href>href</a></code> attribute is not present.</p>

  <p>If the <code id=the-area-element:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is specified on an
  <code id=the-area-element:the-area-element-11><a href=#the-area-element>area</a></code> element, then the <code id=the-area-element:attr-hyperlink-href-6><a href=links.html#attr-hyperlink-href>href</a></code> attribute must
  also be specified.</p>

  



  <h4 id=image-maps><span class=secno>4.8.14</span> Image maps<a href=#image-maps class=self-link></a></h4>

  

  

  <p>An <dfn id=image-map>image map</dfn> allows geometric areas on an image to be associated with <a href=links.html#hyperlink id=image-maps:hyperlink>hyperlinks</a>.</p>

  <p>An image, in the form of an <code id=image-maps:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element, may be associated with an image map (in
  the form of a <code id=image-maps:the-map-element><a href=#the-map-element>map</a></code> element) by specifying a <dfn data-dfn-for=img id=attr-hyperlink-usemap data-dfn-type=element-attr><code>usemap</code></dfn> attribute on the <code id=image-maps:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code> element. The
  <code id=image-maps:attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute, if specified, must be a <a id=image-maps:valid-hash-name-reference href=common-microsyntaxes.html#valid-hash-name-reference>valid
  hash-name reference</a> to a <code id=image-maps:the-map-element-2><a href=#the-map-element>map</a></code> element.</p>

  <div class=example>

   <p>Consider an image that looks as follows:</p>

   <p><img alt="A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." src=../images/sample-usemap.png width=600 height=150></p>

   <p>If we wanted just the colored areas to be clickable, we could do it as follows:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
 Please select a shape:
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;shapes.png&quot;</c-> <c- e>usemap</c-><c- o>=</c-><c- s>&quot;#shapes&quot;</c->
      <c- e>alt</c-><c- o>=</c-><c- s>&quot;Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>map</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;shapes&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>area</c-> <c- e>shape</c-><c- o>=</c-><c- s>rect</c-> <c- e>coords</c-><c- o>=</c-><c- s>&quot;50,50,100,100&quot;</c-><c- p>&gt;</c-> <c- c>&lt;!-- the hole in the red box --&gt;</c->
  <c- p>&lt;</c-><c- f>area</c-> <c- e>shape</c-><c- o>=</c-><c- s>rect</c-> <c- e>coords</c-><c- o>=</c-><c- s>&quot;25,25,125,125&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;red.html&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Red box.&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>area</c-> <c- e>shape</c-><c- o>=</c-><c- s>circle</c-> <c- e>coords</c-><c- o>=</c-><c- s>&quot;200,75,50&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;green.html&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Green circle.&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>area</c-> <c- e>shape</c-><c- o>=</c-><c- s>poly</c-> <c- e>coords</c-><c- o>=</c-><c- s>&quot;325,25,262,125,388,125&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;blue.html&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Blue triangle.&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>area</c-> <c- e>shape</c-><c- o>=</c-><c- s>poly</c-> <c- e>coords</c-><c- o>=</c-><c- s>&quot;450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60&quot;</c->
        <c- e>href</c-><c- o>=</c-><c- s>&quot;yellow.html&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Yellow star.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>map</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  



  <nav><a href=media.html>← 4.8.8 The video element</a> — <a href=index.html>Table of Contents</a> — <a href=embedded-content-other.html>4.8.15 MathML →</a></nav>
